<template>
  <div>
    <t-dialog
      header="选择商品"
      :visible.sync="visible"
      width="60%"
      placement="center"
      :confirmOnEnter="true"
      :onClose="close"
    >
      <template #footer>
          <div>
            <t-button :theme="confirmBtn.theme" :loading="confirmBtn.loading" class="" @click="handleConfirm">
              {{ confirmBtn.content }}
            </t-button>
            <t-button theme="default" class="" @click="close">取消</t-button>
          </div>
      </template>
      <div class="filter ">
        <t-space size="12px">
          <t-select style="width: 220px;" v-model="params.warehouse_id" :options="storeOptions" clearable
                    @change="getData" placeholder="全部">
            <template #label>
              <icon-font name="layers" style="color: #000;"/>
            </template>
          </t-select>

          <t-input style="width: 220px;" v-model="params.key" clearable @change="changeKey" @enter="getData"
                   placeholder="产品关键字搜索">
            <template #label>
              <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
            </template>
          </t-input>
        </t-space>
      </div>
      <div class="mt16">
        <t-table
          rowKey="id"
          :data="lists"
          :columns="columns"
          :stripe="stripe"
          :bordered="bordered"
          :hover="hover"
          :size="size"
          :height="maxHeight"
          :table-layout="tableLayout ? 'auto' : 'fixed'"
          :showHeader="showHeader"
          cellEmptyContent="-"
          resizable
          :loading="loading"
          :pagination="pagination"
          :selected-row-keys="selectedRowKeys"
          @select-change="rehandleSelectChange"
        >
          <template #product_title="{row}">
            <p>{{ row.product_title }}</p>
            <p v-if="row.is_sn" class="" style="font-size: 12px;color: rgba(0,0,0,0.7);">SN:{{ row.sn }}</p>
          </template>
          <template #sell_price="{row}">
            <p>￥{{ row.sell_price }}</p>
          </template>
          <template #pay_price="{row}">
            <p>￥{{ row.pay_price }}</p>
          </template>
          <template #sell_product="{row}">
            <p>{{ row.sell_product }}</p>
          </template>
          <template #count="{row}">

          </template>
        </t-table>
      </div>
    </t-dialog>
  </div>
</template>

<script>
import {IconFont} from "tdesign-icons-vue";
import {warehouse_product_stockListApi} from "@/api/warehouseInventory";
import {warehouseListApi} from "@/api/warehouse";
import {warehouseProductStockListApi} from "@/api/order";

export default {
  name: 'SelectProduct',
  components: {IconFont},
  data() {
    return {
      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'row-select', type: 'single',
          checkProps: this.selectCheckProps,
          width: 50, },
        {colKey: 'product_title', title: '产品信息', width: 180, fixed: 'left', ellipsis: true},
        {colKey: 'warehouse_name', title: '所属仓库', width: 150},
        {colKey: 'have_rent_quantity', title: '租赁中数量', width: 80, align: 'center'},
        {colKey: 'rentable_quantity', title: '可租赁数量', width: 80, align: 'center'},
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
      },
      selectedRowKeys: [],
      currentRowData: {},
      maxHeight: '50vh',
      loading: false,
      visible: false,

      storeOptions: [], // 仓库列表

      confirmBtn: {
        content: '确定',
        theme: 'primary',
        loading: false
      },
      params: {
        limit: 10, // integer 页数 必需 示例值:  10
        page: 1, // integer 页码 必需 示例值:  1
        warehouse_type: '0', // integer 可选 仓库类型：0平台；1代理商
        warehouse_id: '', // integer 仓库ID 可选
        product_id: '', // integer 产品ID 可选
        product_classify_id: '', // integer 产品分类ID 可选
        key: '', // string 搜索：产品名称 可选
        is_del: '', // integer 可选 删除（1回收站；0正常）
      },

      product: {}
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('select', this.currentRowData)
      this.close()
    },
    rehandleSelectChange(value, {currentRowData, currentRowKey, selectedRowData}) {
      this.currentRowData = currentRowData
      console.log('currentRowData', currentRowData)
      this.selectedRowKeys = value
    },
    selectCheckProps({row, rowIndex}) {
      return {disabled: row.rentable_quantity <= 0}
    },
    changeKey() {
      clearTimeout(this.timer)
      this.timer = setTimeout(()=> {
        this.getData()
      }, 500)
    },
    getData() {
      this.pagination.defaultCurrent = 1
      this.getProductList()
    },
    // 获取产品列表
    getProductList() {
      this.loading = true
      this.params.page = this.pagination.defaultCurrent
      warehouse_product_stockListApi(this.params).then(res => {
        this.lists = res.data
        const data = this.lists.find(item=> item.id === this.selectedRowKeys[0])
        if (data) {
          this.currentRowData = data
        }
        this.pagination.total = res.count
      }).catch(err => {
        console.log('err', err)
      }).finally(()=> {
        this.loading = false
      })
    },
    // 获取仓库列表
    getStoreList() {
      const params = {
        limit: 9999,
        page: 1,
        w_type: 0,
        key: '',
        status: 1
      }
      warehouseListApi(params).then(res=> {
        this.storeOptions = res.data.map(item=> ({label: item.name, value: item.id}))
      }).catch(err=> {
        console.log('err', err)
      })
    },
    open(row, id) {
      this.product = row
      this.selectedRowKeys = [id]
      this.lists = []
      this.params = {
        limit: 10, // integer 页数 必需 示例值:  10
        page: 1, // integer 页码 必需 示例值:  1
        warehouse_type: '0', // integer 可选 仓库类型：0平台；1代理商
        warehouse_id: '', // integer 仓库ID 可选
        product_id: row.product_id, // integer 产品ID 可选
        product_classify_id: '', // integer 产品分类ID 可选
        key: '', // string 搜索：产品名称 可选
        is_del: '', // integer 可选 删除（1回收站；0正常）
      }
      // 获取产品数据
      this.getData()
      // 获取仓库列表
      this.getStoreList()
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

.footer-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  background-color: #F9F9F9;
  border-bottom: 1px solid #F9F9F9;
  border-radius: 0 0 var(--td-radius-medium) var(--td-radius-medium);
  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xxl);

  display: flex;
  align-items: center;
  justify-content: space-between;


  .head-hint {
    display: flex;
    align-items: center;

    font-size: 16px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;

    p:first-child {
      color: var(--td-font-gray-2);
    }
  }

}

</style>
